<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>挂号信息表</title>
		<!-- 引入 element-ui 样式文件，需要网络，否则失效 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入 vue 文件，使用本地下载的-->
		<script type="text/javascript" src="js/vue.min.js"></script>
		<!-- 引入 axios 库文件，使用本地下载的-->
		<script type="text/javascript" src="js/axios.min.js"></script>
		<!-- 引入组件库文件，需要网络，否则失效 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	</head>
	<body>
		<div id="app">
			<div>
				<el-input placeholder="请输入要查询的医生姓名" style="width: 300px;" v-model="name"></el-input>
				<el-button type="primary" icon="el-icon-search" @click="getByLike()">搜索</el-button>
			</div>
			<!-- 修改挂号信息之查询信息 -->
			<!-- 使用了 Dialog 对话框组件 -->
			<el-dialog title="请输入要修改的信息" :visible.sync="updateDialogVisible" width="30%">
				<!-- 使用了 Form 表单组件 -->
				<el-form ref="form" label-width="80px">
					<el-form-item label="姓名">
						<el-input v-model="update.rname"></el-input>
					</el-form-item>
					<el-form-item label="身份证号">
						<el-input v-model="update.rnumber"></el-input>
					</el-form-item>
					<el-form-item label="社保卡号">
						<el-input v-model="update.rcard"></el-input>
					</el-form-item>
					<el-form-item label="挂号费">
						<el-input v-model="update.rfee"></el-input>
					</el-form-item>
					<el-form-item label="电话">
						<el-input v-model="update.rphone"></el-input>
					</el-form-item>
					<el-form-item label="是否自费">
						<!-- 使用了 Select 选择器组件 -->
						<el-select v-model="value" placeholder="请选择挂号者是否自费">
							<el-option v-for="item in options" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="性别">
						<!-- 使用了 Select 选择器组件 -->
						<el-select v-model="value2" placeholder="请选择挂号者性别">
							<el-option v-for="item2 in options2" :key="item2.value2" :label="item2.label2"
								:value="item2.value2">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="年龄">
						<el-input v-model="update.rage"></el-input>
					</el-form-item>
					<el-form-item label="初复诊">
						<!-- 使用了 Select 选择器组件 -->
						<el-select v-model="value3" placeholder="请选择挂号者初复诊">
							<el-option v-for="item3 in options3" :key="item3.value3" :label="item3.label3"
								:value="item3.value3">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="科室">
						<!-- 使用了 Select 选择器组件 -->
						<el-select v-model="value4" placeholder="请选择挂号者科室">
							<el-option v-for="item4 in options4" :key="item4.value4" :label="item4.label4"
								:value="item4.value4">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="医生编号">
						<!-- 使用了 Select 选择器组件 -->
						<el-select v-model="value5" placeholder="请选择医生编号">
							<el-option v-for="item5 in options5" :key="item5.value5" :label="item5.label5"
								:value="item5.value5">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="状态">
						<!-- 使用了 Select 选择器组件 -->
						<el-select v-model="value6" placeholder="请选择挂号状态">
							<el-option v-for="item6 in options6" :key="item6.value6" :label="item6.label6"
								:value="item6.value6">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="日期">
						<el-input type="date" v-model="update.rdate"></el-input>
					</el-form-item>
					<el-form-item label="备注">
						<el-input v-model="update.rremarks"></el-input>
					</el-form-item>
				</el-form>
				<!-- 自定义组件样式 -->
				<div style="margin-left: 200px;">
					<span slot="footer" class="dialog-footer">
						<el-button type="warning" @click="updateExit">取 消</el-button>
						<el-button type="warning" @click="updateRegister">确 定</el-button>
					</span>
				</div>
			</el-dialog>

			<!-- 添加挂号信息 -->
			<!-- 使用了 Dialog 对话框组件 -->
			<el-dialog title="请输入要添加的挂号信息" :visible.sync="addDialogVisible" width="30%">
				<!-- 使用了 Form 表单组件 -->
				<!-- :rules="rules" -->
				<el-form ref="form" label-width="80px">
					<!-- prop="one" -->
					<el-form-item label="编号">
						<el-input v-model="add.rId" placeholder="请输入挂号者的编号"></el-input>
					</el-form-item>
					<el-form-item label="姓名">
						<el-input v-model="add.rName" placeholder="请输入挂号者的姓名"></el-input>
					</el-form-item>
					<el-form-item label="身份证号">
						<el-input v-model="add.rNumber" placeholder="请输入挂号者的身份证号"></el-input>
					</el-form-item>
					<el-form-item label="社保卡号">
						<el-input v-model="add.rCard" placeholder="请输入挂号者的社保卡号"></el-input>
					</el-form-item>
					<el-form-item label="挂号费">
						<el-input v-model="add.rFee" placeholder="请输入挂号者的挂号费"></el-input>
					</el-form-item>
					<el-form-item label="电话">
						<el-input v-model="add.rPhone" placeholder="请输入挂号者的电话"></el-input>
					</el-form-item>
					<el-form-item label="是否自费">
						<!-- 使用了 Select 选择器组件 -->
						<el-select v-model="value" placeholder="请选择挂号者是否自费">
							<el-option v-for="item in options" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="性别">
						<!-- 使用了 Select 选择器组件 -->
						<el-select v-model="value2" placeholder="请选择挂号者性别">
							<el-option v-for="item2 in options2" :key="item2.value2" :label="item2.label2"
								:value="item2.value2">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="年龄">
						<el-input v-model="add.rAge" placeholder="请输入挂号者的年龄"></el-input>
					</el-form-item>
					<el-form-item label="初复诊">
						<!-- 使用了 Select 选择器组件 -->
						<el-select v-model="value3" placeholder="请选择挂号者初复诊">
							<el-option v-for="item3 in options3" :key="item3.value3" :label="item3.label3"
								:value="item3.value3">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="科室">
						<!-- 使用了 Select 选择器组件 -->
						<el-select v-model="value4" placeholder="请选择挂号者科室">
							<el-option v-for="item4 in options4" :key="item4.value4" :label="item4.label4"
								:value="item4.value4">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="医生编号">
						<!-- 使用了 Select 选择器组件 -->
						<el-select v-model="value5" placeholder="请选择医生编号">
							<el-option v-for="item5 in options5" :key="item5.value5" :label="item5.label5"
								:value="item5.value5">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="状态">
						<!-- 使用了 Select 选择器组件 -->
						<el-select v-model="value6" placeholder="请选择挂号状态">
							<el-option v-for="item6 in options6" :key="item6.value6" :label="item6.label6"
								:value="item6.value6">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="日期">
						<el-input type="date" v-model="add.rDate" placeholder="请输入挂号者的日期"></el-input>
					</el-form-item>
					<el-form-item label="备注">
						<el-input v-model="add.rRemarks" placeholder="请输入挂号者的备注"></el-input>
					</el-form-item>
				</el-form>
				<!-- 自定义组件样式 -->
				<div style="margin-left: 200px;">
					<span slot="footer" class="dialog-footer">
						<el-button type="warning" @click="addExit">取 消</el-button>
						<!-- <el-button type="primary" @click="addRegister">确 定</el-button> -->
						<el-button type="primary" :disabled="!add.rNumber || !add.rName" @click="addRegister">确 定</el-button>
					</span>
				</div>
			</el-dialog>

			<!-- 查询挂号详细信息 -->
			<!-- 使用了 Dialog 对话框组件 -->
			<!-- 说明：因为查询挂号详细信息是只读的，所以设置 readonly="true" 这个属性即可 -->
			<el-dialog title="挂号详细信息如下" :visible.sync="getDialogVisible" width="30%">
				<!-- 使用了 Form 表单组件 -->
				<el-form ref="form" label-width="80px">
					<el-form-item label="编号">
						<el-input v-model="register.rid" readonly="true"></el-input>
					</el-form-item>
					<el-form-item label="姓名">
						<el-input v-model="register.rname" readonly="true"></el-input>
					</el-form-item>
					<el-form-item label="身份证号">
						<el-input v-model="register.rnumber" readonly="true"></el-input>
					</el-form-item>
					<el-form-item label="社保卡号">
						<el-input v-model="register.rcard" readonly="true"></el-input>
					</el-form-item>
					<!-- 说明：可以直接在前端做判断，让数字对应后台数据显示 -->
					<el-form-item label="挂号费">
						<el-input v-model="register.rfee" readonly="true"></el-input>
					</el-form-item>
					<el-form-item label="电话">
						<el-input v-model="register.rphone" readonly="true"></el-input>
					</el-form-item>
					<!-- 说明：可以直接在前端做判断，让数字对应后台数据显示 -->
					<el-form-item label="是否自费">
						<el-input v-if="register.risPay == 0" value="是" readonly="true"></el-input>
						<el-input v-if="register.risPay == 1" value="否" readonly="true"></el-input>
					</el-form-item>
					<!-- 说明：可以直接在前端做判断，让数字对应后台数据显示 -->
					<el-form-item label="性别">
						<el-input v-if="register.rsex == 0" value="男" readonly="true"></el-input>
						<el-input v-if="register.rsex == 1" value="女" readonly="true"></el-input>
					</el-form-item>
					<el-form-item label="年龄">
						<el-input v-model="register.rage" readonly="true"></el-input>
					</el-form-item>
					<!-- 说明：可以直接在前端做判断，让数字对应后台数据显示 -->
					<el-form-item label="初复诊">
						<el-input v-if="register.rconsultation == 0" value="初诊" readonly="true"></el-input>
						<el-input v-if="register.rconsultation == 1" value="复诊" readonly="true"></el-input>
					</el-form-item>
					<!-- 说明：可以直接在前端做判断，让数字对应后台数据显示 -->
					<el-form-item label="科室">
						<el-input v-if="register.rdepartment == 1" value="急诊科" readonly="true"></el-input>
						<el-input v-if="register.rdepartment == 2" value="儿科" readonly="true"></el-input>
						<el-input v-if="register.rdepartment == 3" value="妇科" readonly="true"></el-input>
						<el-input v-if="register.rdepartment == 4" value="皮肤科" readonly="true"></el-input>
						<el-input v-if="register.rdepartment == 5" value="牙科" readonly="true"></el-input>
						<el-input v-if="register.rdepartment == 6" value="眼科" readonly="true"></el-input>
					</el-form-item>
					<!-- 说明：可以直接在前端做判断，让数字对应后台数据显示 -->
					<el-form-item label="医生编号">
						<el-input v-if="register.did == 1" value="华佗" readonly="true"></el-input>
						<el-input v-if="register.did == 2" value="扁鹊" readonly="true"></el-input>
						<el-input v-if="register.did == 3" value="喜来乐" readonly="true"></el-input>
						<el-input v-if="register.did == 4" value="李时珍" readonly="true"></el-input>
						<el-input v-if="register.did == 5" value="端木蓉" readonly="true"></el-input>
						<el-input v-if="register.did == 6" value="杨永信" readonly="true"></el-input>
						<el-input v-if="register.did == 7" value="甜甜" readonly="true"></el-input>
					</el-form-item>
					<!-- 说明：可以直接在前端做判断，让数字对应后台数据显示 -->
					<el-form-item label="状态">
						<el-input v-if="register.rstatus == 1" value="挂号中" readonly="true"></el-input>
						<el-input v-if="register.rstatus == 2" value="已住院" readonly="true"></el-input>
						<el-input v-if="register.rstatus == 3" value="已出院" readonly="true"></el-input>
						<el-input v-if="register.rstatus == 4" value="已结算" readonly="true"></el-input>
					</el-form-item>
					<el-form-item label="日期">
						<el-input v-model="register.rdate" readonly="true"></el-input>
					</el-form-item>
					<el-form-item label="备注">
						<el-input v-model="register.rremarks" readonly="true"></el-input>
					</el-form-item>
				</el-form>
				<!-- 自定义组件样式 -->
				<div style="margin-left: 270px;">
					<span slot="footer" class="dialog-footer">
						<el-button type="warning" @click="getExit">退 出</el-button>
					</span>
				</div>
			</el-dialog>

			<!-- 查询所有挂号信息 -->
			<!-- 使用了 Table 表格组件 -->
			<template>
				<el-table :data="tableData" border style="width: 100%" height="575px">
					<el-table-column fixed prop="rid" label="挂号编号" width="100">
					</el-table-column>
					<el-table-column prop="rname" label="挂号姓名" width="120">
					</el-table-column>
					<el-table-column prop="rnumber" label="挂号身份证号" width="200">
					</el-table-column>
					<el-table-column prop="rcard" label="挂号社保卡号" width="120">
					</el-table-column>
					<el-table-column prop="rfee" label="挂号费" width="120">
					</el-table-column>
					<el-table-column prop="rphone" label="挂号电话" width="150">
					</el-table-column>
					<el-table-column prop="risPay" label="挂号是否自费" width="120">
						<!-- 说明：可以直接在前端做判断，让数字对应后台数据显示 -->
						<!-- 说明：因为外部使用了 template 作用域包裹，所有这里也需要有，否则失效 -->
						<template slot-scope="scope">
							<span v-if='scope.row.risPay == 0'>是</span>
							<span v-if='scope.row.risPay == 1'>否</span>
						</template>
					</el-table-column>
					<el-table-column prop="rsex" label="挂号性别" width="120">
						<!-- 说明：可以直接在前端做判断，让数字对应后台数据显示 -->
						<!-- 说明：因为外部使用了 template 作用域包裹，所有这里也需要有，否则失效 -->
						<template slot-scope="scope">
							<span v-if='scope.row.rsex == 0'>男</span>
							<span v-if='scope.row.rsex == 1'>女</span>
						</template>
					</el-table-column>
					<el-table-column prop="rage" label="挂号年龄" width="120">
					</el-table-column>
					<el-table-column prop="rconsultation" label="挂号初复诊" width="120">
						<!-- 说明：可以直接在前端做判断，让数字对应后台数据显示 -->
						<!-- 说明：因为外部使用了 template 作用域包裹，所有这里也需要有，否则失效 -->
						<template slot-scope="scope">
							<span v-if='scope.row.rconsultation == 0'>初诊</span>
							<span v-if='scope.row.rconsultation == 1'>复诊</span>
						</template>
					</el-table-column>
					<el-table-column prop="rdepartment" label="挂号科室" width="120">
						<!-- 说明：可以直接在前端做判断，让数字对应后台数据显示 -->
						<!-- 说明：因为外部使用了 template 作用域包裹，所有这里也需要有，否则失效 -->
						<template slot-scope="scope">
							<span v-if='scope.row.rdepartment == 1'>急诊科</span>
							<span v-if='scope.row.rdepartment == 2'>儿科</span>
							<span v-if='scope.row.rdepartment == 3'>妇科</span>
							<span v-if='scope.row.rdepartment == 4'>皮肤科</span>
							<span v-if='scope.row.rdepartment == 5'>牙科</span>
							<span v-if='scope.row.rdepartment == 6'>眼科</span>
						</template>
					</el-table-column>
					<el-table-column prop="did" label="医生编号" width="120">
						<!-- 说明：可以直接在前端做判断，让数字对应后台数据显示 -->
						<!-- 说明：因为外部使用了 template 作用域包裹，所有这里也需要有，否则失效 -->
						<template slot-scope="scope">
							<span v-if='scope.row.did == 1'>华佗</span>
							<span v-if='scope.row.did == 2'>扁鹊</span>
							<span v-if='scope.row.did == 3'>喜来乐</span>
							<span v-if='scope.row.did == 4'>李时珍</span>
							<span v-if='scope.row.did == 5'>端木蓉</span>
							<span v-if='scope.row.did == 6'>杨永信</span>
							<span v-if='scope.row.did == 7'>甜甜</span>
						</template>
					</el-table-column>
					<el-table-column prop="rstatus" label="挂号状态" width="120">
						<!-- 说明：可以直接在前端做判断，让数字对应后台数据显示 -->
						<!-- 说明：因为外部使用了 template 作用域包裹，所有这里也需要有，否则失效 -->
						<template slot-scope="scope">
							<span v-if='scope.row.rstatus == 1'>挂号</span>
							<span v-if='scope.row.rstatus == 2'>已住院</span>
							<span v-if='scope.row.rstatus == 3'>已出院</span>
							<span v-if='scope.row.rstatus == 4'>已结算</span>
						</template>
					</el-table-column>
					<el-table-column prop="rdate" label="挂号日期" width="200">
					</el-table-column>
					<el-table-column prop="rremarks" label="挂号备注" width="120">
					</el-table-column>
					<el-table-column fixed="right" label="操作列表" width="180">
						<!-- 说明：可以直接在前端做判断，让数字对应后台数据显示 -->
						<!-- 说明：因为外部使用了 template 作用域包裹，所有这里也需要有，否则失效 -->
						<template slot-scope="scope">
							<el-button @click="getRegister(scope.row.rid)" type="text" size="small">查看</el-button>
							<el-button @click="addDialogVisible = true" type="text" size="small">添加</el-button>
							<el-button @click="delRegisterGetById(scope.row.rid)" type="text" size="small">删除
							</el-button>
							<el-button @click="updateRegisterById(scope.row.rid)" type="text" size="small">修改
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</template>

			<!-- 分页功能 -->
			<!-- 使用了 Pagination 分页组件 -->
			<div class="block">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="currentPage" :page-sizes="[1, 3, 5, 7]" :page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="total">
				</el-pagination>
			</div>
		</div>

		<!-- 引入外部 js 文件 -->
		<script src="js/common.js"></script>

		<script>
			let vue = new Vue({
				el: '#app',
				data: {
					// 根据姓名查询条件声明
					name: '',
					
					/* rules: {
						one: [{required: true, message: '请输入内容', trigger: 'blur'}],
					}, */
					
					// 修改挂号信息的集合声明
					update: {},
					// 修改挂红信息对话框默认不显示
					updateDialogVisible: false,

					// 添加挂号信息对话框声明
					addDialogVisible: false,
					// 添加挂号信息集合声明
					add: {
						rId: '',
						rName: '',
						rNumber: '',
						rCard: '',
						rFee: '',
						rPhone: '',
						rAge: '',
						rDate: '',
						rRemarks: ''
					},
					// 挂号信息是否自费字段声明
					options: [{
						value: '0',
						label: '是'
					}, {
						value: '1',
						label: '否'
					}],
					// 挂号信息是否自费value值声明
					value: '',
					// 挂号信息性别字段声明
					options2: [{
						value2: '0',
						label2: '男'
					}, {
						value2: '1',
						label2: '女'
					}],
					// 挂号信息性别value值声明
					value2: '',
					// 挂号信息初复诊字段声明
					options3: [{
						value3: '0',
						label3: '初诊'
					}, {
						value3: '1',
						label3: '复诊'
					}],
					// 挂号信息初复诊value值声明
					value3: '',
					// 挂号信息科室字段声明
					options4: [{
						value4: '1',
						label4: '急诊科'
					}, {
						value4: '2',
						label4: '儿科'
					}, {
						value4: '3',
						label4: '妇科'
					}, {
						value4: '4',
						label4: '皮肤科'
					}, {
						value4: '5',
						label4: '牙科'
					}, {
						value4: '6',
						label4: '眼科'
					}],
					// 挂号信息科室value值声明
					value4: '',
					// 挂号信息医生编号字段声明
					options5: [{
						value5: '1',
						label5: '编号 `1` 为华佗医生'
					}, {
						value5: '2',
						label5: '编号 `1` 为扁鹊医生'
					}, {
						value5: '3',
						label5: '编号 `3` 为喜来乐医生'
					}, {
						value5: '4',
						label5: '编号 `4` 为李时珍医生'
					}, {
						value5: '5',
						label5: '编号 `5` 为端木蓉医生'
					}, {
						value5: '6',
						label5: '编号 `6` 为杨永信医生'
					}, {
						value5: '7',
						label5: '编号 `7` 为甜甜医生'
					}],
					// 挂号信息医生编号value值声明
					value5: '',
					// 挂号信息挂号状态字段声明
					options6: [{
						value6: '1',
						label6: '挂号中'
					}, {
						value6: '2',
						label6: '已住院'
					}, {
						value6: '3',
						label6: '已出院'
					}, {
						value6: '4',
						label6: '已结算'
					}],
					// 挂号信息挂号状态value值声明
					value6: '',


					// 挂号详细信息对话框声明
					getDialogVisible: false,
					// 查询挂号详细信息集合声明
					register: {},

					// 显示所有挂号信息数组声明
					tableData: [],
					// 分页起始页，默认为 1
					currentPage: 1,
					// 分页当前记录数，默认为 10
					pageSize: 10,
					// 分页总记录数，默认为 0
					total: 0,
				},
				methods: {
					// 通过挂号人姓名查询信息方法
					getByLike() {
						axios({
							method: 'get',
							url: '/register/getRegisterByName?rName=' + this.name
						}).then(res => {
							this.tableData = res.data
							this.name = ''
							this.$message.success("查询成功")
						})
					},
					
					// 修改挂号信息方法
					updateRegister() {
						// 多数据及文件需要使用 FormData() 表单提交
						let three = new FormData()
						three.append('rId', this.update.rid)
						three.append('rName', this.update.rname)
						three.append('rNumber', this.update.rnumber)
						three.append('rCard', this.update.rcard)
						three.append('rFee', this.update.rfee)
						three.append('rPhone', this.update.rphone)
						three.append('rIsPay', this.value)
						three.append('rSex', this.value2)
						three.append('rAge', this.update.rage)
						three.append('rConsultation', this.value3)
						three.append('rDepartment', this.value4)
						three.append('dId', this.value5)
						three.append('rStatus', this.value6)
						three.append('rDate', this.update.rdate)
						three.append('rRemarks', this.update.rremarks)
						// 开始发送请求
						axios({
							method: 'put',
							url: '/register/updateRegister',
							data: three
						}).then(r => {
							// 成功信息提示
							this.$message.success('修改成功')
							// 关闭对话框
							this.updateDialogVisible = false
							// 重新加载页面
							this.loadRegister(this.currentPage, this.pageSize)
						}).catch(err => {
							// 失败信息提示
							this.$message.error('修改成功！')
							// 输出失败信息
							console.log('失败信息：' + err)
						})
					},
					// 修改挂号信息之查询方法
					updateRegisterById(rid) {
						this.updateDialogVisible = true
						// 开始发送请求
						axios({
							method: 'get',
							url: '/register/getRegisterDetail?rId=' + rid
						}).then(r => {
							// 数据赋值
							this.update = r.data.data
							// 成功信息提示
							this.$message.success('已查询到信息')
						}).catch(err => {
							// 失败信息提示
							this.$message.error('查询信息失败！' + err)
						})
					},
					// 修改挂号信息之取消按钮方法
					updateExit() {
						// 取消信息提示
						this.$message.warning('已取消修改挂号信息')
						// 关闭对话框
						this.updateDialogVisible = false
					},

					// 删除挂号信息方法
					delRegisterGetById(rid) {
						this.$confirm('此操作将永久删除该文件，是否继续？', '删除信息提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							// 开始发送请求
							axios({
								method: 'post',
								url: '/register/delRegisterGetById?rId=' + rid
							}).then(r => {
								this.$message({
									type: 'success',
									message: '删除成功！'
								});
								// 删除成功后，重新加载页面
								this.loadRegister(this.currentPage, this.pageSize)
							})
						}).catch(() => {
							this.$message({
								type: 'warning',
								message: '已取消删除'
							})
						})
					},

					// 添加挂号信息方法
					addRegister() {
						// 对话框打开
						this.addDialogVisible = true
						// 多数据及文件需要使用 FormData() 表单提交
						const form = new FormData()
						form.append('rId', this.add.rId)
						form.append('rName', this.add.rName)
						form.append('rNumber', this.add.rNumber)
						form.append('rCard', this.add.rCard)
						form.append('rFee', this.add.rFee)
						form.append('rPhone', this.add.rPhone)
						form.append('rIsPay', this.value)
						form.append('rSex', this.value2)
						form.append('rAge', this.add.rAge)
						form.append('rConsultation', this.value3)
						form.append('rDepartment', this.value4)
						form.append('dId', this.value5)
						form.append('rStatus', this.value6)
						form.append('rDate', this.add.rDate)
						form.append('rRemarks', this.add.rRemarks)
						// 开始发送请求
						axios({
							method: 'post',
							url: '/register/addRegister',
							data: form
						}).then(r => {
							/* if (this.add.rId.length === 0) {
								this.message.error("该项不能为空")
							} */
							// 成功信息提示
							this.$message.success('添加成功')
							// 关闭对话框
							this.addDialogVisible = false
							// 清空集合数据
							this.add = {}
							// 清空挂号是否自费数据信息
							this.value = ''
							// 清空挂号性别数据信息
							this.value2 = ''
							// 清空挂号初复诊数据信息
							this.value3 = ''
							// 清空挂号科室数据信息
							this.value4 = ''
							// 清空挂号医生编号数据信息
							this.value5 = ''
							// 清空挂号状态数据信息
							this.value6 = ''
							// 重新加载页面
							this.loadRegister(this.currentPage, this.pageSize)
						}).catch(err => {
							// 失败信息提示
							this.$message.error('错误信息！' + err)
							// 输出错误信息
							console.log('错误信息：' + err)
						})
					},
					// 添加挂号信息退出按钮方法
					addExit() {
						// 清空集合数据
						this.add = {}
						// 清空挂号是否自费数据信息
						this.value = ''
						// 清空挂号性别数据信息
						this.value2 = ''
						// 清空挂号初复诊数据信息
						this.value3 = ''
						// 清空挂号科室数据信息
						this.value4 = ''
						// 清空挂号医生编号数据信息
						this.value5 = ''
						// 清空挂号状态数据信息
						this.value6 = ''
						// 退出信息提示
						this.$message.warning('已退出添加方法')
						// 关闭对话框
						this.addDialogVisible = false
					},

					// 查看详细信息方法
					getRegister(rid) {
						// 打开对话框
						this.getDialogVisible = true
						// 开始发送请求
						axios({
							method: 'get',
							url: '/register/getRegisterDetail?rId=' + rid
						}).then(r => {
							// 数据赋值
							this.register = r.data.data
							// 成功信息提示
							this.$message.success('查询挂号详细信息成功')
						}).catch(err => {
							// 失败信息提示
							this.$message.error('查询失败！' + err)
						})
					},
					// 查询挂号详细信息退出按钮方法
					getExit() {
						// 退出信息提示
						this.$message.warning('准备退出查看信息')
						// 对话框关闭
						this.getDialogVisible = false
					},

					// 查询所有挂号信息并分页方法
					loadRegister(pageNum, pageSize) {
						// 清空数据再请求
						this.tableData = []
						// 总记录数默认为 0
						this.total = 0
						// 开始发送请求
						axios({
							method: 'get',
							url: '/register/getAllAndPage?pageNum=' + pageNum + "&pageSize=" + pageSize
						}).then(r => {
							// 给 tableData 数据赋值
							this.tableData = r.data.data.list
							// 给 total 数据赋值
							this.total = r.data.data.total
							// 给 currentPage 数据赋值
							this.currentPage = r.data.data.pageNum
							// 给 pageSize 数据赋值
							this.pageSize = r.data.data.pageSize
						}).catch(err => {
							// 失败信息提示
							this.$message.error('查询失败！' + err)
						})
					},
					// 每页条数方法
					handleSizeChange(v) {
						this.pageSize = v
						this.loadRegister(this.currentPage, v)
					},
					// 当前页条数方法
					handleCurrentChange(v) {
						this.loadRegister(v, this.pageSize)
					},
				},
				// 加载完成之前执行
				created() {
					this.loadRegister(this.currentPage, this.pageSize)
				},
			})
		</script>
	</body>
</html>
